<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入mate 标签 -->
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <title>字体</title>

    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_731881_lhnuig2b1dk.css"/>
    <link rel="stylesheet" href="../css/font.css"/>

</head>

<!-- 登陆页 制作开始 -->
<body>
<!-- 这个代表状态栏 -->
<!--<div class="ztl"></div>-->

<header flex="dir:top main:center cross:center">
    <h1 flex="main:center cross:center">AVITAL</h1>
    <span flex="main:center cross:center">Mobile UI Kit</span>
</header>

<section class="form" flex="dir:top main:center cross:center">
    <input type="email" placeholder="E-mail" style="text-align: center"/>
    <input type="password" placeholder="Password" style="text-align: center"/>
</section>

<section class="btn" flex="dir:top cross:center">
    <button type="button" class="btn01" flex="main:center cross:center">
        <span>LOGIN NOW</span>
        <i class="iconfont icon-right"></i>
    </button>

    <div class="btn02s" flex>
        <button flex="main:center cross:center">
            <span class="s1">F</span>
            <span class="s2">Facebook</span>
        </button>
        <button flex="main:center cross:center">
            <span class="s1">G</span>
            <span class="s2">Google+</span>
        </button>
    </div>

    <a href="#" flex="main:center cross:center">Don’t have an account ?</a>
</section>

<!-- 登陆页 制作结束 -->
</body>
</html>